import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import { actionCreators } from './store'
import RecommendAuthors from './components/RecommendAuthors'

class Home extends PureComponent{

    componentDidMount() {
      this.props.getChangeHomeData();
      window.addEventListener('scroll', this.props.changeScrollTopShow)
    }

    handleScrollTop = () => {
        window.scrollTo(0, 0);
    }

    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                  <img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                  <Topic />
                  <List />
                </HomeLeft>
                <HomeRight>
                     <Recommend />
                     <RecommendAuthors />
                </HomeRight>
                { this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>返回顶部</BackTop> : null }
            </HomeWrapper>
        )
    }
}

const  mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})

const mapDispatch = (dispatch) => ({
    getChangeHomeData() {
        dispatch(actionCreators.getHomeData());
    },
    changeScrollTopShow() {
       if(document.documentElement.scrollTop > 200) {
          dispatch(actionCreators.toggleShowScroll(true))
       }else {
          dispatch(actionCreators.toggleShowScroll(false)) 
       }
    }
})

export default connect(mapState, mapDispatch)(Home)